<template>
    
    <el-upload
    v-model:file-list="attachment"
    class="upload-fujian"
    :action="VITE_URL + '/admin.fileUpload/upload2'"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-success="uploadSuccess"
    :data="{i:uniacid, token:token}"
  >
    <el-button type="primary">上传附件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500KB.
      </div>
    </template>
  </el-upload>

</template>

<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
const VITE_URL = window.VITE_URL;
const uniacid = localStorage.getItem('uniacid');
const token = localStorage.getItem('token');
const attachment: any = inject('attachment');

// const fileList = ref<UploadUserFile[]>([
  // {
  //   name: 'element-plus-logo.svg',
  //   url: 'https://element-plus.org/images/element-plus-logo.svg',
  // },
  // {
  //   name: 'element-plus-logo2.svg',
  //   url: 'https://element-plus.org/images/element-plus-logo.svg',
  // },
// ])

const uploadSuccess = ( res:any ) => {

    console.log( res )

    // info.value.image = VITE_URL + '/storage/' + res.data;
    // info.value.image =  '/storage/' + res;
    // info.value.image =  res;    
    
    console.log( attachment.value )
}

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}

</script>